import { useGetProjectsQuery } from '@shared/api/projectApi'
import { Grid } from '@shared/ui/Grid'
import { AddProjectCard } from '../AddProjectCard'
import { ProjectCard } from '../ProjectCard'
import { ProjectCardSkeleton } from '../ProjectCard/ProjectCardSkeleton/ProjectCardSkeleton'
import styles from './ProjectCardsList.module.scss'

interface ProjectCardsListProps {
  addProject?: () => void
  isLoading?: boolean
}

export const ProjectCardsList = ({ addProject, isLoading }: ProjectCardsListProps) => {
  const { data: projects } = useGetProjectsQuery()
  const renderSkeletons = () => {
    const skeletonCount = 4
    return Array.from({ length: skeletonCount }, (_, index) => <ProjectCardSkeleton key={index} />)
  }

  return (
    <>
      <Grid
        className={styles.component}
        colMaxWidth={200}
        colMinWidth={200}
        columns='auto-fill'
        gap={24}
      >
        {isLoading ? (
          <>{renderSkeletons()}</>
        ) : (
          <>
            {projects?.map((project) => <ProjectCard key={project.id} project={project} />)}
            {addProject && <AddProjectCard onClick={addProject} />}
          </>
        )}
      </Grid>
    </>
  )
}

export default ProjectCardsList
